<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html 	xmlns="http://www.w3.org/1999/xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:fn="http://java.sun.com/jsp/jstl/functions"
		xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
	<h:title></h:title>
	<style type="text/css" >
		.ui-widget {
		    font-size: 11px !important;
		}
		.ui-selectonemenu {
			top: 5px;
		}
	</style>
	
	<script type="text/javascript" src="resources/js/dispositivo.js"></script>
	<script language="javascript">
		$(document).ready(function(){
		    var y_fixo = $("#.divFlutante").offset().top;
		    $(window).scroll(function () {
		        $("#.divFlutante").animate({
		            top: y_fixo+$(document).scrollTop()+"px"
		            },{duration:500,queue:false}
		        );
		    });
		});
	</script>
</h:head>
	<h:body>
		<h:form>
			<div id="header">
			    <ui:insert name="header">
			    	<ui:include src="/domotic/resources/templates/header.xhtml"/>
			    </ui:insert>
			</div>
			
			<div id="content">
				<p:panel header="Cadastro de Dispositivos" style="min-height: 410px;">
				
					<h:panelGrid columns="2">
						<span>Cômodo: </span><p:selectOneMenu title="Nome" maxlength="80" size="60" style="width: 140px;">
							<f:selectItem itemLabel="Select One" itemValue="0"/>
							<f:selectItem itemLabel="Cômodo 1" itemValue="1" />
							<f:selectItem itemLabel="Cômodo 2" itemValue="2" />
							<f:selectItem itemLabel="Cômodo 3" itemValue="3" />
						</p:selectOneMenu>
					</h:panelGrid>
					
					<!--
					<span><font color='red'>Dispositivos Cadastrados:</font></span>
					<p:dataTable emptyMessage="Nenhum registro encontrado" style="width: 800px;">
						<f:facet name="header">Lista de Condições</f:facet>
						
						<p:column headerText="Código" style="width: 50px;">  
							<h:outputText value="Código" />  
						</p:column>
						
						<p:column headerText="Nome">  
							<h:outputText value="Nome" />  
						</p:column>
						
						<p:column style="width: 15px;">
							<f:facet name="header"><span class="ui-icon ui-icon-circle-plus" style="cursor: hand;" onclick="addConditionDialog.show();"></span></f:facet> 
							<h:outputText value="Menos" /> 
						</p:column>
						
						<f:facet name="footer">Existem X condições.</f:facet>
					</p:dataTable>
					<div style="min-height: 6px;" />
					-->
					
					<div style="min-height: 6px;" />
					<p:button value="Cadastrar"></p:button>
					<p:button value="Alterar" disabled="true"></p:button>
					<p:button value="Excluir" disabled="true"></p:button>
					<div style="min-height: 10px;" />
					
					<span>Imagem do Cômodo: </span><br/>
					<p:graphicImage style="border: 1px solid;" url="C:\\domotic\images\layout.png"/> <br></br>
					<p:graphicImage url="E:\temp\estimativa.png" value="C:/domotic/images/xd.png"/> <br></br>
					<img src="C://domotic/images/xd.png" /><br></br>
					<p:graphicImage style="border: 1px solid;" value="/domotic/resources/img/layout.png" />
					
					
					
				</p:panel>
				
			</div>
			
			<div id="footer">
			  <ui:insert name="footer">
					<ui:include src="/domotic/resources/templates/footer.xhtml"/>
			  </ui:insert>
			</div>
			<!-- Remove, find a bug when messages displayed -->
			<p:growl id="messages" showDetail="true"/>
			
			<div style="width: 300px; position: absolute; top: 150px; right: 15px;" class="divFlutante">
				<p:panel header="Dispositivos Disponíveis" toggleable="true">
					<p:panel header="Sensores" toggleable="true">
						<h:outputText value="XD"></h:outputText>
					
					</p:panel>
					<p:panel header="Atuadores" toggleable="true">
						<h:outputText value="XD"></h:outputText>
					
					</p:panel>
				</p:panel>
			</div>
		</h:form>
	</h:body>
</html>